<template>
    <div class="editor-container">
        <a-modal title="发布成功" v-model:visible="showPublishForm" width="700px" :footer="null">
            <publish-form />
        </a-modal>
        <preview-form v-model:visible="showPreviewForm" v-if="showPreviewForm"></preview-form>
        <a-layout>
            <a-layout-header class="header">
                <div class="page-title">
                    <router-link to="/">
                        <img alt="慕课乐高" src="../assets/logo-simple.png" class="logo-img" />
                    </router-link>
                    <inline-edit :value="page.title" @change="titleChange" />
                </div>
                <a-menu
                    :selectable="false"
                    theme="dark"
                    mode="horizontal"
                    :style="{ lineHeight: '64px', position:'absolute', top: 0, right: 0 }"
                >
                    <a-menu-item key="1">
                        <a-button type="primary" @click="preview">预览和设置</a-button>
                    </a-menu-item>
                    <a-menu-item key="2">
                        <a-button type="primary" @click="saveWork" :loading="saveIsLoading">
                            保存
                        </a-button>
                    </a-menu-item>
                    <a-menu-item key="3">
                        <a-button type="primary" @click="publish" :loading="isPublishing">
                            发布
                        </a-button>
                    </a-menu-item>
                    <a-menu-item key="4">
                        <user-profile :user="userInfo"></user-profile>
                    </a-menu-item>
                </a-menu>
            </a-layout-header>
        </a-layout>
        <a-layout>
            <a-layout-sider width="300" style="background: #fff">
                <div class="sidebar-container">
                    组件列表
                    <components-list :list="defaultTextTemplates" @onItemClick="addItem" />
                </div>
            </a-layout-sider>
            <a-layout style="padding: 0 24px 24px">
                <a-layout-content class="preview-container">
                    <history-area></history-area>
                    <p>画布区域</p>
                    <div class="preview-list" id="canvas-area" :class="{ 'canvas-fix': canvasFix }">
                        <div class="body-container" :style="page.props">
                            <edit-wrapper
                                @setActive="setActive"
                                @update-position="updatePosition"
                                v-for="component in components"
                                :key="component.id"
                                :id="component.id"
                                :hidden="component.isHidden"
                                :props="component.props"
                                :active="component.id === (currentElement && currentElement.id)"
                            >
                                <component :is="component.name" v-bind="component.props" />
                            </edit-wrapper>
                        </div>
                    </div>
                </a-layout-content>
            </a-layout>
            <a-layout-sider width="300" style="background: #fff" class="settings-panel">
                <a-tabs type="card" v-model:activeKey="activePanel">
                    <a-tab-pane key="component" tab="属性设置" class="no-top-radius">
                        <div v-if="currentElement">
                            <edit-group
                                v-if="!currentElement.isLocked"
                                :props="currentElement.props"
                                @change="handleChange"
                            ></edit-group>
                            <div v-else>
                                <a-empty>
                                    <template #description>
                                        <p>该元素被锁定，无法编辑</p>
                                    </template>
                                </a-empty>
                            </div>
                        </div>
                        <pre>{{ currentElement && currentElement.props }}</pre>
                    </a-tab-pane>
                    <a-tab-pane key="layer" tab="图层设置">
                        <layer-list
                            :list="components"
                            :selectedId="currentElement && currentElement.id"
                            @change="handleChange"
                            @select="setActive"
                        ></layer-list>
                    </a-tab-pane>
                    <a-tab-pane key="page" tab="页面设置">
                        <props-table :props="page.props" @change="pageChange"></props-table>
                    </a-tab-pane>
                </a-tabs>
            </a-layout-sider>
        </a-layout>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, onMounted, nextTick } from 'vue';
import { useStore } from 'vuex';
import { pickBy } from 'lodash-es';
import { useRoute } from 'vue-router';
import { GlobalDataProps } from '../store';
import { ComponentData } from '../store/editor';
import ComponentsList from '../components/ComponentsList.vue';
import defaultTextTemplates from '../defaultTemplates';
import { TextComponentProps } from 'xigua-componentss';
import EditWrapper from '../components/EditWrapper.vue';
import PropsTable from '../components/PropsTable.vue';
import EditGroup from '../components/EditGroup.vue';
import LayerList from '../components/LayerList.vue';
import UserProfile from '../components/UserProfile.vue';
import InlineEdit from '../components/InlineEdit.vue';
import HistoryArea from './editor/HistoryArea.vue';
import PreviewForm from './editor/PreviewForm.vue';
import PublishForm from './editor/PublishForm.vue';
import initHotKeys from '../plugins/hotKeys';
import initContextMenu from '../plugins/contextMenu';
import useSaveWork from '../hooks/useSaveWork';
import usePublishWork from '../hooks/usePublishWork';
export type TabType = 'component' | 'layer' | 'page';

export default defineComponent({
    name: 'editor',
    components: {
        ComponentsList,
        EditWrapper,
        PropsTable,
        EditGroup,
        LayerList,
        HistoryArea,
        UserProfile,
        InlineEdit,
        PreviewForm,
        PublishForm
    },
    setup() {
        initHotKeys();
        initContextMenu();
        const route = useRoute();
        const currentWorkId = route.params.id;
        const store = useStore<GlobalDataProps>();
        const components = computed(() => store.state.editor.components);
        const currentElement = computed<ComponentData | null>(
            () => store.getters.getCurrentElement
        );
        const activePanel = ref<TabType>('component');
        const page = computed(() => store.state.editor.page);
        const userInfo = computed(() => store.state.user);
        const showPreviewForm = ref(false);
        const showPublishForm = ref(false);
        const canvasFix = ref(false);
        const { saveWork, saveIsLoading } = useSaveWork();
        const { publishWork, isPublishing } = usePublishWork();
        debugger
        onMounted(() => {
            debugger
            if (currentWorkId) {
                store.dispatch('fetchWork', { urlParams: { id: currentWorkId } });
            }
        });
        const addItem = (props: ComponentData) => {
            store.commit('addComponent', props);
        };
        const setActive = (id: string) => {
            store.commit('setActive', id);
        };
        const handleChange = (e: { key: [keyof TextComponentProps]; value: string | number }) => {
            console.log('update e = ', e);
            store.commit('updateComponent', e);
        };
        const pageChange = (e: Event) => {
            console.log('page', e);
            store.commit('updatePage', e);
        };
        const updatePosition = (data: { left: number; top: number; id: string }) => {
            const { id } = data;
            const updatedData = pickBy<number>(data, (v, k) => k !== 'id');
            const keysArr = Object.keys(updatedData);
            const valuesArr = Object.values(updatedData).map(v => v + 'px');
            store.commit('updateComponent', { key: keysArr, value: valuesArr, id });
        };
        const titleChange = (newTitle: string) => {
            store.commit('updatePage', { key: 'title', value: newTitle, isRoot: true });
        };
        const preview = async () => {
            await saveWork();
            showPreviewForm.value = true;
        };
        const publish = async () => {
            // remove select element
            store.commit('setActive', '');
            const el = document.getElementById('canvas-area') as HTMLElement;
            canvasFix.value = true;
            await nextTick();
            try {
                await publishWork(el);
                showPublishForm.value = true;
            } catch (e) {
                console.error(e);
            } finally {
                canvasFix.value = false;
            }
        };
        return {
            components,
            defaultTextTemplates,
            currentElement,
            page,
            activePanel,
            saveIsLoading,
            userInfo,
            showPreviewForm,
            showPublishForm,
            canvasFix,
            isPublishing,
            addItem,
            setActive,
            handleChange,
            pageChange,
            updatePosition,
            titleChange,
            saveWork,
            preview,
            publish
        };
    },
});
</script>

<style>
.editor-container .preview-container {
  padding: 24px;
  margin: 0;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.editor-container .preview-list {
  padding: 0;
  margin: 0;
  min-width: 375px;
  min-height: 200px;
  border: 1px solid #efefef;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  margin-top: 50px;
  max-height: 80vh;
}
.page-title {
  display: flex;
}
.page-title .inline-edit span {
  font-weight: 500;
  margin-left: 10px;
  font-size: 16px;
}
.preview-list.canvas-fix .edit-wrapper > * {
  box-shadow: none !important;
}
.preview-list.canvas-fix {
  position: absolute;
  max-height: none;
}
</style>
